import React from 'react';
import PropTypes from 'prop-types';
import { Balloon, Radio, Overlay } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import intl from '../../../locale';

const { Popup } = Overlay;

function TriggerBtn() {
  return (
    <Balloon.Tooltip align="l" trigger={<ButtonIcon name="menu-line" />}>
      {intl.get({ id: 'code-assets.components.diffSettingBtns.Set', defaultMessage: '设置' })}
    </Balloon.Tooltip>
  );
}

function DiffViewTrigger(props) {
  const { forceDiffViewType, toggleViewType } = props;
  return (
    <Popup
      trigger={
        <span style={{ display: 'inline-block', height: 24 }}>
          <TriggerBtn />
        </span>
      }
      triggerType="click"
    >
      <div className="commit-ring-sort-setting-popup">
        <span
          style={{ fontSize: 14, display: 'block' }}
          className="commit-ring-sort-setting-popup-title"
        >
          <label id="groupId">
            {intl.get({
              id: 'code-assets.components.diffSettingBtns.DiffView',
              defaultMessage: 'Diff视图：',
            })}
          </label>
        </span>
        <Radio.Group
          value={forceDiffViewType || 'unified'}
          onChange={toggleViewType}
          aria-labelledby="groupId"
        >
          <Radio id="unified" value="unified">
            {intl.get({
              id: 'code-assets.components.treeAndDiff.SingleColumn',
              defaultMessage: '单栏',
            })}
          </Radio>
          <Radio id="watermelon" value="watermelon">
            {intl.get({
              id: 'code-assets.components.treeAndDiff.DoubleColumn',
              defaultMessage: '双栏',
            })}
          </Radio>
        </Radio.Group>
      </div>
    </Popup>
  );
}

DiffViewTrigger.propTypes = {
  forceDiffViewType: PropTypes.bool,
  toggleViewType: PropTypes.func,
};

export default DiffViewTrigger;
